<template>
	<view class="pages">
		<!-- 头部 -->
		<view class="pages_heard" :style="{height: `${search.top+search.height+10}px`}">
			<view class="pages_heardMain" :style="{top: `${search.top}px`,height: `${search.height}px`}">
				<view class="pages_heardMainButon" @click="goPages(`/package/citySelection/index?isText=2`)">
					<image class="pages_heardMainButon_locIon" src="/static/img/locIon.png"></image>
					<span>{{location.name ? location.name : '城市'}}</span>
					<image src="/static/img/leftActionIcon.png"></image>
				</view>
				<span>老谭餐饮情报局</span>
			</view>
		</view>
		<!-- 轮播图与语音播报 -->
		<view class="pages_roof" :style="{marginTop: `${search.top+search.height+10}px`}">
			<view class="pages_banner" @click="goPages(official.homeTop.page)">
				<image mode="aspectFill" :src="official.homeTop.coverImg"></image>
			</view>
		</view>

		<!-- 老谭有话说 -->
		<view class="wrapper player-wrapper">
			<view class="player-wrapper_bd">
				<view class="player-img">
					<image src="/static/img/figure.png"></image>
				</view>
				<view class="player-box">
					<view class="player-box_hd">
						<image class="player-icon_dot" src="/static/img/reflectLeftIcon.png"></image>
						<text>老谭有话说</text>
					</view>
					<view class="player-box_bd">{{official.greet.greetTitle}}</view>
					<view class="player-box_ft">
						<view @click="triggerAudio" class="player-btn">
							<image :src="isPlay ? '/static/img/adioIcon.png' : '/static/img/stop.gif' "></image>
							<text>点击{{isPlay ? '播放' : '暂停'}}语音</text>
						</view>
						<image class="player-icon_dot" src="/static/img/reflectRightIcon.png"></image>
					</view>
				</view>
			</view>
			<view class="player-wrapper_ft" @click="goPages(`/package/dataIntro/index`)">
				<view>注：均为实时数据，非人工干预</view>
				<u-icon name="arrow-right" color="#999" size="24rpx" label="点击查看原数据" labelPos="left" labelSize="24rpx"
					labelColor="#333"></u-icon>
			</view>
		</view>

		<!-- 我的经营工具箱 -->
		<view class="pages_intelligence">
			<view class="pages_intelligenceHeard" @click="goPages(`/package/category/index?isText=1`)">
				<view class="pages_intelligenceHeardLeft">我的经营工具箱</view>
				<ul class="pages_intelligenceHeardRight">
					<li class="pages_intelligenceHeardRightItem">
						<span>{{variety ? variety.children[0].label : '请选择品类'}}</span>
						<image src="/static/img/bottomIcon.png"></image>
					</li>
				</ul>
			</view>

			<view class="pages_referrals" v-if="variety">
				<view class="pages_referralsTitleBox">
					<image src="/static/img/heardIcon.png"></image>
				</view>
				<view
					v-if="(referralsData.followIngredients.foodList || referralsData.mainFoods.foodList || referralsData.newFoods.foodList) && (referralsData.followIngredients || referralsData.mainFoods || referralsData.newFoods)">
					<view v-for="(item, key, index) in referralsData" :key="index"
						@click.stop="goPatch(`/package/recordsCenter/index?type=${key}&month=${item.month}`,true,5,key)">
						<referrals :referralsIndex="index" :referralsKey="key" :referralsItem="item"></referrals>
					</view>
				</view>
				<view v-else class="pages_referralsTast">{{isReferralsTast}}</view>

			</view>
			<view class="pages_referrals pages_referralsTaxst" v-else>
				{{location ? '请选择品类' : '请选择城市'}}
			</view>

			<view class="pages_tool">
				<view class="pages_toolItems" v-for="(item,index) in toolData" :key="index"
					@click.stop="goPatch(item.path,false,index)">
					<view class="pages_toolItemTitle">
						<view>{{item.name}}</view>
						<view style="margin-left: 8rpx;" @click.stop="showNotice(item.notice)">
							<u-icon name="question-circle" color="#999999" size="16"></u-icon>
						</view>
					</view>
					<view class="pages_toolItemText">
						{{index==0?'你的品类当下有机会吗':index==1?'你的品类现状如何':index==2?'在哪里开店，如何定价最赚钱':index==3?'该向哪个品牌学习':''}}
					</view>
					<image mode="aspectFill" class="pages_toolItemBg" :src="imgSrc+item.src" v-if="imgSrc"></image>
					<image mode="scaleToFill" class="icon-freeTag" src="/static/img/index_tool_freeTag.png"
						v-if="item.free"></image>
				</view>
			</view>

		</view>

		<!-- 我的社群 -->
		<view class="pages_mass">

			<view class="pages_massHeard" @click="goPages('/package/marketing/index')">
				<view class="pages_intelligenceHeardLeft">
					{{location&&user&&isAllAssociation&&location.name ? user.communityList : '' | ff_communityList}}
				</view>
				<view class="pages_massHeardRight">
					<span>加入更多社群</span>
					<image src="/static/img/rightIcon.png"></image>
				</view>
			</view>

			<view class="pages_massMain">
				<view class="pages_massMainBox">
					<view>
						<view class="pages_massMainListFist" v-for="(item,index) in giantArr" :key="index">
							<view class="pages_massMainListFistTop">
								<view class="pages_massMainListFistTop-txBigBox">
									<view class="pages_massMainListFistTop-txBox" @click="ff_previewImage(item.avatar)">
										<image class="pages_massMainListFistTop-tx" mode="aspectFill"
											:src="item.avatar"></image>
									</view>
								</view>
								<view class="pages_massMainListFistTop-yyuBox">
									<view class="pages_massMainListFistTop-yyuBoxTop">
										<span class="pages_massMainListFistTop-yyuBoxTop-name">大咖发言：</span>
									</view>
									<view class="pages_massMainListFistTop-yyuBoxBottom">{{item.nickname}}
									</view>
								</view>
							</view>
							<view class="pages_massMainListFistTopBottonBox">{{item.word}}</view>
						</view>
					</view>
					<view class="pages_massMainListTwoBox">
						<view class="pages_massMainListTwoBoxLeft" @click="initGetList">
							<image src="/static/img/shuaxinIcon.png"></image>
							<span>换一批</span>
						</view>
						<view class="pages_massMainListTwoBoxRight" @click="association(isAllAssociation)">
							<span>点击查看更多大咖言论</span>
							<image src="/static/img/rightIcons.png"></image>
						</view>
					</view>

				</view>

				<!-- 未加群 -->
				<view class="advertisingBox" v-if="location.name&&isAllAssociation&&official.homeCommunity.coverImg"
					@click="goPages(official.homeCommunity.page)">
					<view class="advertisingBox-img">
						<image mode="widthFix" :src="official.homeCommunity.coverImg"></image>
					</view>
				</view>
				<!-- 加群 -->
				<view class="advertisingBox" v-else-if="official.communityAd.coverImg"
					@click="goPages(official.communityAd.page)">
					<view class="advertisingBox-img">
						<image mode="widthFix" :src="official.communityAd.coverImg"></image>
					</view>
				</view>

			</view>
			<view class="pages_massButtom" @click="association(isAllAssociation)">
				<span>{{isAllAssociation ? '立即加入社群' : '去社群讨论'}} </span>
				<image src="/static/img/leftActionIcon.png"></image>
			</view>
		</view>

		<!-- 情报资讯 -->
		<view class="pages_intelligence">
			<view class="pages_intelligenceHeard">
				<view class="pages_intelligenceHeardLeft">情报资讯</view>
				<view class="pages_informationHeardrIGHT">
				</view>
			</view>
			<view class="pages_informationMain">
				<view class="pages_informationMainItems"
					@click="goPatchx(`/package/intelligence/index?informationId=${item.informationId}`)"
					v-for="(item,index) in isrDetail" :key="index">
					<view class="pages_informationMainItemsLeft">
						<image mode="aspectFill" :src="item.coverImg"></image>
					</view>
					<view class="pages_informationMainItemsRight">
						<p class="pages_informationMainItemsRight_text">{{item.informationTitle}}</p>
						<view class="pages_informationMainItemsRight_Cextex">
							<view class="pages_informationMainItemsRight_CextexLeft">
								<span>{{item.categoryName}}</span>
								<span>{{item.readNum}}阅读</span>
							</view>
							<view v-if="item.hasCharge==1" class="pages_informationMainItemsRight_CextexRight">
								<span>¥</span>
								<span>{{item.price}}</span>
							</view>
							<view v-else
								class="pages_informationMainItemsRight_CextexRight pages_informationMainItemsRight_CextexRight-unlock">
								<image src="/static/img/unlockImg.png"></image>
								<span>已解锁</span>
							</view>
						</view>
					</view>
				</view>
				<view class="pages_informationBottom" @click="taggerISR">
					<span>{{!isUp ? '更多行业资讯陆续更新中' : '更多行业资讯'}}</span>
					<image v-if="isUp" src="/static/img/bottomIcon.png">
					</image>
				</view>

			</view>
		</view>


		<p class="pages_end">- 章鱼小数据·版权所有 -</p>

		<!-- 城市 -->
		<u-overlay :show="showPicker" @click="showPicker = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">选择地址</view>
				<image @click.stop="showPicker = false" class="saleBox__HeardImg" src="/static/img/chachaIcon.png">
					<picker-view :value="regionIndex" style="width:100%;height:500rpx;" indicator-style="height:50px;"
						@change="bindRegionChange">
						<picker-view-column>
							<block v-for="(item,index) in regionData" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.label}}</view>
							</block>
						</picker-view-column>
						<picker-view-column>
							<block v-for="(item,index) in regionData[regionIndex[0]].children" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.label}}</view>
							</block>
						</picker-view-column>
					</picker-view>
					<view @click.stop="showPicker = false" :class="'saleBox__MainItem saleBox__MainItem--red'">
						确定</view>
			</view>
		</u-overlay>

		</u-popup>
		<!-- 社区二维码 -->
		<u-overlay :show="isCode" @click="isCode = false">
			<view class="codeBox" @click.stop="">
				<image v-if="imgSrc" class="codeBoxBg" :src="`${imgSrc}/welcomeBg.png`"></image>
				<view class="codeBoxMainBox">
					<view class="codeBoxMainBox_top">成功解锁社群</view>
					<view class="codeBoxMainBox_topText">
						<p>你已成功解锁社群</p>
						<p>请长按识别下方二维码加入社群</p>
					</view>
					<view class="codeBoxMainBox_topImg" @click="ff_previewImage(qrCode)">
						<image mode="aspectFill" :show-menu-by-longpress="true" :src="qrCode"></image>
					</view>
				</view>
				<view class="codeBoxMainBox_botom" @click.stop="isCode = false">
					回到首页
				</view>
			</view>
		</u-overlay>

		<!-- 社区福利购物 -->
		<!-- <u-overlay :show="isXnsShow" @click="isXnsShow = false">
			<view class="mycodeBox" @click.stop="">
				<image v-if="unlockObj.poster" class="codeBoxBg" :src="unlockObj.poster"></image>
				<view class="codeBoxMainBox_botom" @click="directUnlock">立即加购</view>
			</view>
		</u-overlay> -->

		<!-- <u-modal confirmColor="#FFDA2D" @cancel="ff_marketingClose" @close="ff_marketingClose"
			@confirm="ff_marketingConfirm" :showCancelButton="true" :show="marketingShow"
			title="当前为体验版，点击立即解锁即享城市全品类海量数据及大咖社群，低至99元/年" confirmText="立即解锁"></u-modal> -->

		<u-modal confirmColor="#FFDA2D" @cancel="ff_close" @close="ff_close" @confirm="ff_confirm"
			:showCancelButton="true" :show="modalShow==1" :title="myModalTitle"></u-modal>

		<noticeModal :show="isNoticeShow" :title="noticeInfo.title" :content="noticeInfo.content" confirmText="我知道了"
			@confirm="isNoticeShow=false" @close="isNoticeShow=false"></noticeModal>

		<noticeModal :show="isXnsShow" title="开通多个城市餐饮大数据" confirmText="我知道了" @confirm="isXnsShow=false"
			@close="isXnsShow=false">
			<slot>
				<view>适宜于在多个城市连锁经营的餐饮品牌<br>功能开发中，敬请期待</view>
			</slot>
		</noticeModal>

		<noticeModal :show="marketingShow" title="温馨提示" :showCancelButton="true" @cancel="ff_marketingClose"
			@close="ff_marketingClose" confirmText="立即解锁" @confirm="ff_marketingConfirm">
			<slot>
				<view style="font-size: 28rpx; font-weight: bold; margin-bottom: 16rpx;">
					添加客服微信：<text style="color: #FF471C;">zyxsj0606</text>可领取VIP时长！
				</view>
				<view>
					当前为体验版，点击 立即解锁 即享全部VIP功能：本地餐饮精准大数据，大咖社群，老谭精品文章永久免费读！
				</view>
			</slot>
		</noticeModal>

		<noticeModal :show="isEnterModalShow" content="餐饮商机评估板块已为您免费开放！疫情之下，用大数据让你心中有数！" :showCancelButton="true"
			cancelText="关闭" @cancel="closeEnterModal" @close="closeEnterModal" confirmText="立即查看"
			@confirm="navTo(`/package/assess/index`)"></noticeModal>


	</view>
</template>

<script>
	import referrals from '../../components/referrals/index.vue';
	import noticeModal from '../../components/noticeModal/index.vue';
	export default {
		components: {
			referrals,
			noticeModal,
		},
		data() {
			return {
				marketingShow: false,
				myModalTitle: '您的社区会员即将过期\n是否继续续费?',
				// 0未过期 1过期 2复购 
				modalShow: 0,
				isXnsShow: false,
				unlockObj: null,
				isPlay: true,
				gianTatal: 0,
				gianTotal: 0,
				giantArr: [],
				isrTrueDetail: [],
				total: 0,
				isReferralsTast: '',
				isAllAssociation: true,
				isCode: false,
				qrCode: '',
				official: null,
				city: '城市',
				showPicker: false,
				regionIndex: [0, 0],
				categoryShowIndex: 0,
				isCategoryShow: false,
				isSnsShow: false,
				innerAudioContext: null,
				category: [],
				isShow: false,
				pageNum: 1,
				region: [],
				swiperList: [],
				toolData: [{
						name: '餐饮商机评估',
						src: '/index_toolbox_cysjpg.png',
						path: '/package/assess/index',
						notice: {
							title: '商机发展指数',
							content: `<div>在发展指数判定其生命周期的基础上，叠加竞争、经营相关维度数据模型分析，判定该城市品类下是否还有进入新开店的成功率。分值0-100，不同分值代表新开店成功的概率和可行建议。</div>`,
						},
						free: true,
					},
					{
						name: '品类现状评估',
						src: '/index_toolbox_plxzpg.png',
						path: '/package/categoryAssess/index',
						notice: {
							title: '发展指数',
							content: `<div>基于市场生命周期理论，对城市品类下整个市场餐厅、消费相关供需半年数据进行模型和算法计算，判断该城市品类市场处于什么生命周期阶段。分值0-100，不同得分代表处于不同市场发展阶段。</div>`,
						},
					},
					{
						name: '选址及定价',
						src: '/index_toolbox_xzjdj.png',
						path: '/package/pricing/index',
						notice: {
							title: '选址及定价',
							content: `<div><strong>选址模型：</strong>在城市品类下，通过经纬度划分下的商圈半径内，模型算法交叉计算商圈中餐厅、产品和消费等数据，判定每个商圈供应、竞争和需求半年变化处于什么趋势，比较推算出需求大，复购频次高，但满意度不高，竞争不激烈的商圈。</div>
									<div style="margin-top: 8px;"><strong>定价模型：</strong>调用OSD（章鱼小数据数据库）中第一代客单模型——客单热度分布数据，在城市品类下，客单区间热度越高，代表消费认可度越高，定价成功的概率也就越高。</div>`,
						},
					},
					{
						name: '对标参考品牌',
						src: '/index_toolbox_dbckpp.png',
						path: '/package/trademark/index',
						notice: {
							title: '对标参考品牌',
							content: `<div>调用OSD（章鱼小数据数据库）中品牌经营指数，品牌经营指数为综合经营表现的指数，通过品牌影响力、餐厅运营和产品等各个维度数据模型算法计算得出。分值0-100，分值越高，达标整体经营越好。`,
						},
					},
				],
				massTabsIndex: 0,
				massTabs: [],
				referralsData: [],
				isr: [],
				isrReduce: [],
				isrDetail: [],
				isUp: true,
				banner: '',
				variety: null,
				cuisineObj: {},
				pageSize: 10,
				giantPageSize: 2,
				giantPageNum: 0,
				pastTime: 1000 * 60 * 60 * 24 * 7,
				// 提示弹窗展示
				isNoticeShow: false,
				// 提示弹窗信息
				noticeInfo: {
					title: '',
					content: '',
				},
				isEnterModalShow: false
			}
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				title: '加入老谭餐饮情报局看海量餐饮大数据',
				imageUrl: 'https://octopus-wxapp.oss-cn-hangzhou.aliyuncs.com/octopus/yxiao.png',
				path: `/pages/start/index`
			}
		},
		/**
		 * 分享微信朋友圈
		 */
		// onShareTimeline() {
		// 	return {
		// 		title: '加入老谭餐饮情报局看海量餐饮大数据',
		// 	}
		// },
		onLoad(options) {

			this.variety = uni.getStorageSync('variety');

			uni.showLoading({
				title: '加载中',
				icon: 'none',
				mask: true
			})
			this.initLocation().then(res => {
				this.initISR();
				this.bannerGetList();
				this.initRegionGetList();
				this.initGetList();
				this.initgetCity();
				this.ff_modalShow();


				if (this.variety) {
					this.initTool();
				} else {
					this.initVariety().then(res => {
						this.variety = uni.getStorageSync('variety');
						this.initTool();
					})
				}


				let isComCode = getApp().globalData.isComCode;
				if (isComCode) {
					getApp().globalData.isComCode = false;
					this.isCode = Boolean(isComCode);
					this.getAccountWxFnfo();
				}
			})

			this.isEnterModalShow = !uni.getStorageSync('HIDE_ENTER_MODAL')
		},
		onHide() {
			this.destroyAudio();
		},
		onShow(options) {

			this.variety = uni.getStorageSync('variety');
			if (options) {
				this.gianTatal = 0;
				this.gianTotal = 0;
				this.giantPageNum = 0;
				this.isrDetail = [];
				this.initISR();
				this.bannerGetList();
				this.initGetList();
				this.initgetCity();
				// this.ff_modalShow();

				this.variety = uni.getStorageSync('variety');
				if (this.variety) {
					this.initTool();
				} else {
					this.initVariety().then(res => {
						this.initTool();
					})
				}

			}
			let isComCode = getApp().globalData.isComCode;
			if (isComCode) {
				this.isrDetail = [];
				this.initISR();
				this.bannerGetList();
				this.variety = uni.getStorageSync('variety');
				if (this.variety) {
					this.initTool();
				} else {
					this.initVariety().then(res => {

						this.initTool();
					})
				}
				getApp().globalData.isComCode = false;
				this.isCode = Boolean(isComCode);
				this.getAccountWxFnfo();
			}
			this.getLocation();

		},
		onReady() {},

		computed: {
			search() {
				return this.$store.state.search;
			},
			location() {
				return this.$store.state.location;
			},
			user() {
				return this.$store.state.user;
			},
			imgSrc() {
				return this.$store.state.imgSrc;
			},
			regionData() {
				return this.$store.state.regionData;
			},

		},
		filters: {
			ff_communityList(val) {
				if (val) {
					let CityName = ''
					val.forEach(item => {
						if (item.isCurrentCity) {
							CityName = item.communityName;
						}
					});

					return CityName ? `${CityName}社群` : '我的社群'
				} else {
					return '我的社群'
				}
			}
		},
		watch: {
			location(newVal) {
				this.isAllAssociation = true;
				if (this.user && this.user.communityList) {
					console.log('this.isAllAssociation--->', this.isAllAssociation)
					for (let i = 0; i < this.user.communityList.length; i++) {
						if (this.user.communityList[i].isCurrentCity) {
							this.isAllAssociation = false;
							this.qrCode = this.user.communityList[i].qrCode
						}
					}
				}
			}
		},
		methods: {
			navTo(path) {
				this.closeEnterModal()
				uni.navigateTo({
					url: path
				})
			},
			closeEnterModal() {
				uni.setStorageSync('HIDE_ENTER_MODAL', true)
				this.isEnterModalShow = false
			},
			ff_modalShow(isPass = false) {
				return new Promise((ress, rejj) => {
					if (this.user && this.user.communityList && this.user.communityList.length != 0) {
						let myPass = false;
						this.user.communityList.forEach((item, index) => {
							if (item.isCurrentCity == 1) {
								let expireTime = new Date(item.expireTime).getTime();
								let nowTime = new Date().getTime();
								let chaTime = expireTime - nowTime;
								myPass = true;
								if (this.pastTime >= chaTime) {
									if (chaTime <= 0) {
										this.myModalTitle = '您的社区会员已经过期\n是否继续续费?'
										this.modalShow = 1;
									} else {
										if (!isPass) {
											this.myModalTitle = '您的社区会员即将过期\n是否继续续费?'
											this.modalShow = 1;
										} else {
											this.modalShow = 0;
										}

									}

									ress()
								} else {
									this.modalShow = 0;
									ress()
								}
							}
						})
						if (!myPass) {
							if (isPass) {
								// 判断该用户是否是第一次解锁社区
								if (this.user && this.user.communityList && this.user.communityList.length != 0) {
									this.modalShow = 2;
									this.isXnsShow = true;
									ress();
								} else {
									this.marketingShow = true;
								}
							}

						}
					} else {
						if (isPass) {
							this.marketingShow = true;
						}

					}
				})
			},
			ff_marketingConfirm() {
				this.marketingShow = false;
				uni.navigateTo({
					url: '/package/marketing/index'
				})
			},
			ff_marketingClose() {
				this.marketingShow = false;
			},
			ff_close() {
				this.modalShow = 0;
			},
			ff_confirm() {
				this.modalShow = 2;
				this.isXnsShow = true;
			},
			directUnlock() {
				let location = uni.getStorageSync('location');
				this.isXnsShow = false;
				if (this.modalShow == 2) {
					uni.navigateTo({
						url: `/package/citySelection/index?isBlack=1&isText=5&isPast=true&priceId=${this.unlockObj.priceId}`
					});
					this.modalShow = 0;
				} else {
					uni.navigateTo({
						url: `/package/citySelection/index?isBlack=1&isText=5&priceId=${this.unlockObj.priceId}`
					});
				}

			},
			initgetCity() {
				return new Promise((ress, rejj) => {
					let location = uni.getStorageSync('location');
					this.$api.communityPriceRepurchase({
						cityId: location.id
					}).then(res => {
						if (res.code == 200) {
							this.unlockObj = res.data;
							ress(res.code);
						} else if (res.code == 503) {
							this.unlockObj = res.data;
							ress(res.code);
						}
					})
				})
			},
			initGetList() {
				if (this.gianTotal == 0 && this.giantPageNum == 1) {
					uni.showToast({
						title: '暂无大咖发言',
						icon: "none",
						mask: true
					})
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				if (this.gianTatal >= this.gianTotal) {
					this.gianTatal = this.giantPageNum = 0
				}
				this.giantPageNum++;
				let req = {
					pageSize: this.giantPageSize,
					pageNum: this.giantPageNum
				}
				this.$api.communityGiantGetList(req).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						this.giantArr = res.rows;
						this.gianTatal = this.gianTatal + res.rows.length;
						this.gianTotal = res.total;
					}
				})
			},
			initLocation() {
				return new Promise((ress, rejj) => {
					let location = uni.getStorageSync('location')

					if (location && location != 'null') {
						console.log(location)
						ress();
					} else {
						this.$api.regionRegionList().then(res => {
							if (res.code == 200) {
								let city = '成都';
								console.log('nowItem--->', res.data)
								res.data.forEach((item, index) => {
									item.regionList.forEach((nowItem, nowIndex) => {

										if (city == nowItem.name) {



											this.$api.userLocation({
												city
											}).then(resx => {
												if (resx.code == 200) {
													this.$store.commit(
														'updatalocation', resx
														.data.location);
													this.$store.commit(
														'updataUser', resx.data
														.user);
													ress();
												}
											})


										}
									});
								});


							}
						});
					}

				})

			},
			getLocation() {
				return new Promise((ress, rejj) => {
					let that = this;
					let location = uni.getStorageSync('location');
					if (!location) {
						uni.getFuzzyLocation({
							type: 'gcj02', //返回可以用于uni.openLocation的经纬度
							success: (res) => {
								this.$qqmapsdk.reverseGeocoder({
									//把你的经纬度
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success(qqmapsdkRes) {
										let city = qqmapsdkRes.result.address_component.city
											.replace('市', '');
										that.$api.userLocation({
											city
										}).then(res => {
											if (res.code == 200) {
												uni.setStorageSync('location', res.data
													.location);
												that.$store.commit('updatalocation',
													res
													.data.location);

												if (res.data.user) {
													that.$store.commit('updataUser',
														res
														.data.user);
													ress();
												} else {
													ress();
													that.getInfoUser();
												}
											}
										})
									}
								})
							},
							fail() {
								if (!that.user) {
									// that.getInfoUser();
								}
							}
						});
					} else {
						this.$store.commit('updatalocation', location)
						ress();
						if (!that.user) {

							// that.getInfoUser();
						}
					}
				})

			},
			initVariety() {
				return new Promise((ress, rejj) => {
					this.getLocation().then(resss => {
						let location = uni.getStorageSync('location')

						let cityId = location.id;
						this.$api.getCategoryList({
							cityId
						}).then(res => {
							if (res.code == 200) {
								ress();


								let nowVariety = {};
								let nowSamllVariety = {}
								let labeName = '川菜'
								res.data.forEach((item, index) => {
									console.log('nowVariety--->', nowVariety)
									if (item.label == '中餐') {
										nowVariety = item;
									}
								})
								if (nowVariety.label) {
									nowVariety.children.forEach((item, index) => {
										if (item.label == labeName) {
											nowSamllVariety = item;
										}
									})
									let variety = {
										label: nowVariety.label,
										id: nowVariety.id,
										children: [nowSamllVariety]
									}
									this.variety = variety;
									uni.setStorageSync('variety', variety);
								}
							}
						})
					})

				})

			},
			initTool() {
				this.variety = uni.getStorageSync('variety');
				if (this.variety.children && this.variety.children[0].id) {
					let req = {
						cityId: this.location.id,
						categoryId: this.variety.children[0].id
					}
					this.$api.getFood(req).then(res => {
						if (res.code == 200) {
							this.referralsData = res.data;
							this.isReferralsTast =
								`${this.location.name}的${this.variety.children[0].label} 暂未更新数据`;
						}
					})
				}
			},
			getAccountWxFnfo() {
				this.$api.accountWxFnfo().then(res => {
					if (res.code == 200) {
						this.$store.commit('updataUser', res.data.user);
						for (let i = 0; i < res.data.user.communityList.length; i++) {
							if (res.data.user.communityList[i].isCurrentCity) {
								this.isAllAssociation = false;
								this.qrCode = res.data.user.communityList[i].qrCode
							}
						}
					}
				})
			},
			unlock(title, priceId, communityId) {

			},
			association(isAdd) {
				if (isAdd) {
					// 未过加群
					// this.goPages('/package/marketing/index');
					// this.marketingShow=true;	
					this.ff_modalShow(true);
				} else {
					// 已加群
					this.isCode = true;
				}
			},
			bannerGetList() {
				this.$api.contentGet().then(res => {
					if (res.code == 200) {
						this.official = res.data;
						uni.hideLoading()
						if (this.official.greet && this.official.greet.greetAudio) {
							this.createAudio()
						}
					}
				});
			},
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
				// this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.src = this.official.greet.greetAudio;
			},
			initRegionGetList() {
				this.$api.regionGetList().then(res => {
					if (res.code == 200) {
						this.$store.commit('updataRegionData', res.data);
						let location = uni.getStorageSync('location');
						this.city = location.name;
						for (let i = 0; i < res.data.length; i++) {
							let item = res.data[i].children;
							for (let j = 0; j < item.length; j++) {
								if (location.name == item[j].label) {
									this.regionIndex = [i, j];
									return;
								}
							}
						}

					}
				})
			},
			// 选择地区
			bindRegionChange(e) {
				let {
					value
				} = e.detail;

				if (value[0] !== this.regionIndex[0]) {
					value[1] = 0;
				}
				this.regionIndex = value
				this.city = this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].label;
			},

			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					longPressActions: true,
					urls: [myImgs],
					current: index
				})
			},
			goPages(url, isTrue = true) {
				if (!isTrue && !this.location) {
					uni.showToast({
						icon: 'none',
						title: '请选择城市',
						mask: true
					})
					return false
				}
				if (url == '/package/marketing/index') {
					// 判断该用户是否是第一次解锁社区
					if (this.user && this.user.communityList && this.user.communityList.length != 0) {

						this.ff_modalShow(true).then(resss => {
							if (!this.modalShow) {
								this.isXnsShow = true;
							}
						})
					} else {
						this.marketingShow = true;
					}
					return;
				}


				if (url == '/package/citySelection/index?isText=2') {
					if (!this.user || this.user.communityList.length == 0) {
						// uni.navigateTo({
						// 	url: '/package/marketing/index'
						// })
						this.marketingShow = true;
						return
					}
				}

				if (url == '/package/category/index?isText=1') {
					if (!this.user || this.user.communityList.length == 0) {
						// uni.navigateTo({
						// 	url: '/package/marketing/index'
						// })
						this.marketingShow = true;

					} else {
						this.ff_modalShow(true).then(resss => {
							if (!this.modalShow) {
								uni.navigateTo({
									url
								})
							}
						})
					}
					return
				}



				uni.navigateTo({
					url
				})

			},

			goPatchx(url, isTrue = true) {
				if (!this.user) {
					this.getInfoUser().then(res => {
						if (!isTrue && !this.location) {
							uni.showToast({
								icon: 'none',
								title: '请选择城市',
								mask: true
							})
							return false
						}

						uni.navigateTo({
							url
						})
					})
				} else {
					if (!isTrue && !this.location) {
						uni.showToast({
							icon: 'none',
							title: '请选择城市',
							mask: true
						})
						return false
					}
					uni.navigateTo({
						url
					})
				}
			},
			goPatch(url, isTrue = true, index, key) {
				// console.log(foodList)
				console.log(this.referralsData[key])
				if (!this.user) {
					this.getInfoUser().then(res => {


						if (!isTrue && !this.location) {
							uni.showToast({
								icon: 'none',
								title: '请选择城市',
								mask: true
							})
							return false
						} else if (!isTrue && !this.variety) {
							uni.showToast({
								icon: 'none',
								title: '请选择品类',
								mask: true
							})
							return false
						}

						if (index == 0) {
							uni.navigateTo({
								url
							})
						} else if (index == 1) {
							if (this.location.categoryFree) {
								this.ff_modalShow(true)
							} else {
								this.ff_modalShow(true).then(resss => {
									if (!this.modalShow) {
										uni.navigateTo({
											url
										})
									}
								})
							}
						} else if (index == 2) {
							if (this.location.siteFree) {
								this.ff_modalShow(true)
							} else {
								this.ff_modalShow(true).then(resss => {
									if (!this.modalShow) {
										uni.navigateTo({
											url
										})
									}
								})
							}

						} else if (index == 3) {
							if (this.location.benchmarkFree) {
								this.ff_modalShow(true)
							} else {
								this.ff_modalShow(true).then(resss => {
									if (!this.modalShow) {
										uni.navigateTo({
											url
										})
									}
								})
							}
						} else if (index == 5) {
							if (this.location.foodFree) {
								this.ff_modalShow(true)
							} else {
								if (!this.referralsData[key].foodList || this.referralsData[key].foodList.length ==
									0) {
									uni.showToast({
										icon: 'none',
										title: '即将上线 敬请期待',
										mask: true
									})
									return
								}
								this.ff_modalShow(true).then(resss => {
									if (!this.modalShow) {
										uni.navigateTo({
											url
										})
									}
								})
							}
						}




					})
				} else {
					if (!isTrue && !this.location) {
						uni.showToast({
							icon: 'none',
							title: '请选择城市',
							mask: true
						})
						return false
					} else if (!isTrue && !this.variety) {
						uni.showToast({
							icon: 'none',
							title: '请选择品类',
							mask: true
						})
						return false
					}
					if (index == 0) {

						uni.navigateTo({
							url
						})
					} else if (index == 1) {
						if (this.location.categoryFree) {
							this.ff_modalShow(true)
						} else {
							this.ff_modalShow(true).then(resss => {
								if (!this.modalShow) {
									uni.navigateTo({
										url
									})
								}
							})
						}
					} else if (index == 2) {
						if (this.location.siteFree) {
							this.ff_modalShow(true)
						} else {
							this.ff_modalShow(true).then(resss => {
								if (!this.modalShow) {
									uni.navigateTo({
										url
									})
								}
							})
						}

					} else if (index == 3) {
						if (this.location.benchmarkFree) {
							this.ff_modalShow(true)
						} else {
							this.ff_modalShow(true).then(resss => {
								if (!this.modalShow) {
									uni.navigateTo({
										url
									})
								}
							})
						}
					} else if (index == 5) {
						if (this.location.foodFree) {
							this.ff_modalShow(true)
						} else {
							if (!this.referralsData[key].foodList || this.referralsData[key].foodList.length == 0) {
								uni.showToast({
									icon: 'none',
									title: '即将上线 敬请期待',
									mask: true
								})
								return
							}
							this.ff_modalShow(true).then(resss => {
								if (!this.modalShow) {
									uni.navigateTo({
										url
									})
								}
							})
						}
					}


				}
			},

			taggerISR() {
				if (this.isUp) {
					this.pageNum++;
					this.initISR();
				}
			},
			initISR() {

				if (this.pageNum == 1) {
					this.isrTrueDetail = [];
					this.isrDetail = [];
					this.isUp = true;
				}
				if (this.pageNum == 2) {
					this.isrDetail = this.isrTrueDetail
					if (this.isrDetail.length == this.total) {
						this.isUp = false
					}
				} else {

					let pageNum = this.pageNum > 2 ? this.pageNum - 1 : this.pageNum;
					this.$api.informationGetList({
						pageNum,
						pageSize: this.pageSize
					}).then(res => {
						if (res.code == 200) {
							this.total = res.total;
							this.isrTrueDetail = [...this.isrTrueDetail, ...res.rows];
							if (this.pageNum == 1) {
								this.isrDetail = this.isrTrueDetail.slice(0, 3);
							} else {
								this.isrDetail = this.isrTrueDetail;
							}

							if (this.isrDetail.length == this.total) {
								this.isUp = false
							}
						}
					})
				}

			},
			getInfoUser() {
				return new Promise((ress, rejj) => {
					if (!this.user) {
						let that = this;
						uni.showModal({
							title: '温馨提示',
							content: '亲，授权微信登录后才能正常使用小程序功能',
							success(res) {
								//如果用户点击了确定按钮
								if (res.confirm) {
									uni.getUserProfile({
										desc: '获取你的昵称、头像',
										success: res => {
											let {
												userInfo
											} = res
											console.log('userInfo---->', res)

											let req = {
												cityId: that.location ? that.location.id :
													'',
												avatar: userInfo.avatarUrl,
												nickname: userInfo.nickName,
											}
											uni.showLoading({
												title: '加载中',
												mask: true
											});
											that.$api.accountWxEditInfo(req).then(res => {
												if (res.code == 200) {
													uni.setStorageSync('location', res
														.data.location);
													that.$store.commit(
														'updatalocation', res.data
														.location);
													that.$store.commit('updataUser',
														res
														.data.user);
													ress();
												}

											})
										},
										fail: res => {
											//拒绝授权
											uni.showToast({
												title: '您拒绝了请求,不能正常使用小程序',
												icon: 'error',
												duration: 2000
											});
										}
									});
								} else if (res.cancel) {
									//如果用户点击了取消按钮
									//console.log(3);
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
								}
							}
						});

					}

				})
			},
			triggerAudio(paused = true) {
				if (paused && this.innerAudioContext.paused) {
					this.innerAudioContext.play();
					this.isPlay = false;
				} else {
					this.innerAudioContext.pause();
					this.isPlay = true;
				}
			},
			destroyAudio() {
				this.triggerAudio(false);
			},
			showNotice(notice) {
				this.isNoticeShow = true
				this.noticeInfo = notice
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F5;
		border-top: .01rpx solid transparent;
		box-sizing: border-box;

		.pages_heard {
			width: 100%;
			background-color: #FFDA2D;
			position: fixed;
			z-index: 9;

		}

		.pages_heardMainButon {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			height: 100%;
			padding-left: 32rpx;

			.pages_heardMainButon_locIon {
				width: 40rpx !important;
				height: 40rpx !important;
				margin-right: 4rpx;
				transform: translateY(0rpx) !important;
			}

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 44rpx;
				color: #333333;
			}

			image {
				margin-left: 2rpx;
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				transform: translateY(5rpx);
			}
		}

		.pages_heardMain {
			width: 100%;
			display: flex;
			position: absolute;
			align-items: center;
			justify-content: center;
		}

		.pages_heardMain>span {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.pages_roof {
			width: 100%;
			background: linear-gradient(180deg, #FFDA2D, #F5F5F5);

			.pages_banner {
				width: 100%;
				height: 400rpx;
				// margin-bottom: 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			/deep/.u-swiper {
				background-color: transparent !important;
			}

			.pages_voice {
				border-radius: 48rpx 48rpx 0px 0px;
				background: linear-gradient(180deg, #FFF8D8 0%, #FFE9BF 30%, transparent);
				margin: 24rpx 32rpx;
			}

			.pages_voiceBox {
				position: relative;
				padding: 24rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 2;
				border-radius: 48rpx 48rpx 0px 0px;
				// background: linear-gradient(180deg, #FFF8D8 0%, #FFE9BF 100%);
				width: 686rpx;
				display: flex;
				z-index: 1;
			}

			.pages_voiceRightRightIcon {
				position: absolute;
				left: -56rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.pages_voiceRightLeftIcon {
				position: absolute;
				right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}


			.pages_voiceFigure {
				width: 242rpx;
				height: 242rpx;
				flex: 0 0 242rpx;
				display: inline-block;
				position: relative;

				image {
					height: 262rpx;
					width: 242rpx;
					position: absolute;
					bottom: 8%;
				}
			}

			.pages_voiceRight {
				flex: 1;
				padding-left: 24rpx;
			}

			.pages_voiceRightTop {
				position: relative;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #FF9E00;

				image {
					width: 40rpx;
					height: 40rpx;
					// position: absolute;
					// left: -56rpx;
					margin-right: 8rpx;
				}

			}

			.pages_voiceRightBottonText {
				width: 172rpx;
				height: 44rpx;
				background: #FFDB34;
				opacity: 1;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				span {
					display: inline-block;
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28rpx;
					color: #333333;
				}
			}


			.pages_voiceRightBotton {
				padding-right: 64rpx;
				display: flex;
				justify-content: flex-end;
				position: relative;
			}

			.pages_voiceRightBgImg {
				width: 582rpx;
				height: 134rpx;
				position: absolute;
				left: -12%;

			}

			.pages_voiceRightMain {
				// width: 348rpx;
				height: 102rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 34rpx;
				color: #333333;
				margin: 16rpx 0 26rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				padding-left: 48rpx;
				box-sizing: border-box;
			}

			.pages_voiceRightBroadcastIcon {
				width: 144rpx;
				height: 40rpx;
			}
		}

		.pages_mass {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			margin: 24rpx 32rpx;
		}

		.pages_massHeard {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			margin-top: -24rpx;
		}

		.pages_massHeardLeft::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none !important;
		}

		.pages_massHeardLeft {
			overflow-x: scroll;
			white-space: nowrap;
			flex: 1;

			li {
				display: inline-block;
				height: 49rpx;
				line-height: 45rpx;
				background: #f4f4f4;
				border-radius: 26rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #333333;
				text-align: center;
				padding: 0 20rpx;
				margin-right: 24rpx;
				box-sizing: border-box;
				border: 2rpx solid transparent;
			}

			.action {
				background: #FFDA2D;
				border: 2rpx solid #333333;
			}
		}

		.pages_massHeardRight {
			flex: 0 0 168rpx;
			display: flex;
			align-items: center;
			position: relative;
			// &::after{
			// 	content: " ";
			// 	position: absolute;
			// }

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #333333;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pages_massMain {
			overflow: hidden;
			width: 100%;
		}

		.pages_massMainBj {
			border-radius: 24rpx;
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pages_massMainBjGg {
			width: 100%;
			height: 240rpx;
			opacity: 1;
			border-radius: 16rpx;
			margin: 16rpx 0 24rpx 0;

			image {
				border-radius: 16rpx;
				width: 100%;
				height: 100%;
			}
		}

		.pages_massMainListFist {
			padding: 24rpx;
			border-radius: 16rpx;

			position: relative;
			box-sizing: border-box;
			background: linear-gradient(180deg, #FFF8D8 0%, #FFFCF0 100%);
			margin-bottom: 16rpx;

		}

		.pages_massMainListFistTop {
			display: flex;
		}

		.pages_massMainListFistTop-txBigBox {
			flex: 0 0 72rpx;
			width: 72rpx;
			height: 72rpx;
			position: relative;
			margin-right: 12rpx;
			box-sizing: border-box;
		}

		.pages_massMainListFistTop-txBox {

			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			border: 2rpx solid #FFDE14;
			box-sizing: border-box;
			overflow: hidden;


		}

		.pages_massMainListFistTop-tx {
			width: 100%;
			height: 100%;
		}

		.pages_massMainListFistTop-txKin {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: -9rpx;
			left: -9rpx;
		}

		.pages_massMainListFistTop-yyuBox {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

		}

		.pages_massMainListFistTop-yyuBoxTop {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.pages_massMainListFistTop-yyuBoxTop-name {
			display: inline-block;
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 28rpx;
			color: #FF9E00;
		}

		.pages_massMainListFistTop-yyuBoxToprRight {
			display: flex;
			align-items: center;

			span {
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #666666;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pages_massMainListFistTop-yyuBoxBottom {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 34rpx;
			color: #333333;
			margin-top: 4rpx;
		}

		.pages_massMainListTwoBox {
			display: flex;
		}

		.pages_massMainListTwoBoxLeft {
			width: 186rpx;
			flex: 0 0 186rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFDA2D;
			opacity: 1;
			border-radius: 16rpx;
			margin-right: 16rpx;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 12rpx;
			}

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
			}
		}

		.pages_massMainListTwoBoxRight {
			flex: 1;
			height: 80rpx;
			background: #FFDA2D;
			opacity: 1;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		.pages_massMainListFistTopBottonBox {
			border-radius: 16rpx;
			padding: 16rpx;
			box-sizing: border-box;
			position: relative;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #333333;
			background: #FFDC96;
			margin-top: 20rpx;

			&::after {
				content: '';
				border: 10rpx solid transparent;
				border-bottom: 10rpx solid #FFDC96;
				position: absolute;
				top: -20rpx;
				left: 26rpx;
			}
		}

		.advertisingBox {
			margin-top: 24rpx;
			padding-top: 24rpx;
			border-top: 1rpx solid #E8E8E8;

			.advertisingBox-img {
				max-height: 200rpx;
				border-radius: 16rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: auto;
				}
			}
		}

		.pages_massMainListFistmakeBj {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.pages_massMainListFistLeft {
			flex: 0 0 72rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			box-sizing: border-box;
			overflow: hidden;
			z-index: 1;
			margin-left: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pages_massMainListFistRight {
			z-index: 1;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #000000;
			}

			// flex: 1;
			margin-left: 10rpx;
			width: calc(100% - 45rpx - 72rpx);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			display: flex;
			flex-direction: column;

			p {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			p:nth-child(1) {
				font-weight: bold;
			}
		}

		.pages_massMainListItems {
			padding: 0 16rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			width: 100%;
			height: 54rpx;
			// line-height: 54rpx;
			opacity: 1;
			border-radius: 28rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 16rpx;


			span {
				width: 120rpx;
				display: inline-block;
				height: 34rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			span:nth-child(2) {
				width: calc(100% - 120rpx - 20rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.pages_massMainListItems:nth-child(2) {
			background: #EFF4FF;

			span:nth-child(1) {
				color: #3B77FF;
			}
		}

		.pages_massMainListItems:nth-child(3) {
			background: #FFF8D8;

			span:nth-child(1) {
				color: #FF8940;
			}
		}

		.pages_massMainListItems:nth-child(4) {
			background: #EDFAF9;

			span:nth-child(1) {
				color: #1BBFAC;
			}
		}

		.pages_massButtom {
			border-radius: 16rpx;
			background-color: #FFDA2D;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			margin-top: 24rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			span {
				margin-left: 4rpx;
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
			}
		}

		.pages_intelligence {
			margin: 24rpx 32rpx;
			border-radius: 24rpx;
			padding: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			position: relative;
		}

		.pages_intelligenceHeard {
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: -24rpx;
		}

		.pages_intelligenceTopBg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.pages_intelligenceHeardLeft {
			line-height: 48rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: "";
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFDA2D;
				border-left: 8rpx solid #FFDA2D;
			}
		}

		.pages_informationHeardrIGHT {
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 36rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 36rpx;
				color: #333333;
			}

			image {
				margin-left: 4rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pages_end {
			margin: 32rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #CCCCCC;
		}

		.pages_informationMainItems {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
			display: flex;
		}

		.pages_informationMainItemsLeft {
			flex: 0 0 192rpx;
			border-radius: 24rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.pages_informationMainItemsRight_Cextex {
			display: flex;
			justify-content: space-between;

		}

		.pages_informationMainItemsRight_CextexLeft {
			font-size: 24rpx;

			span:nth-child(1) {
				display: inline-block;
				background: #fff9dd;
				border-radius: 8rpx;
				color: #FFA102;
				height: 42rpx;
				line-height: 42rpx;
				padding: 0 10rpx;

			}

			span:nth-child(2) {
				display: inline-block;
				color: #FFA102;
				height: 42rpx;
				line-height: 42rpx;
				color: #CCCCCC;
				margin-left: 12rpx;
			}
		}

		.pages_informationMainItemsRight_CextexRight {

			span:nth-child(1) {
				font-weight: bold;
				font-size: 26rpx;
				color: #FF471C;
			}

			span:nth-child(2) {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				height: 42rpx;
				line-height: 42rpx;
				color: #FF471C;
			}
		}

		.pages_informationMainItemsRight_CextexRight-unlock {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			span:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #CCCCCC;
				margin-left: 6rpx;
			}
		}

		.pages_informationMainItemsRight {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.pages_informationMainItemsRight_text {
			height: 72rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			margin-bottom: 26rpx;
			font-weight: 500;
			line-height: 36rpx;
			color: #333333;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.pages_intelligenceHeardRight {
			display: flex;
		}

		.pages_intelligenceHeardRightItem {
			color: #333333;
			display: flex;
			align-items: center;

			span {
				font-size: 32rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		.pages_intelligenceHeardRightItem:nth-child(2) {
			margin-left: 32rpx;
		}

		.pages_referrals {
			margin-top: 14rpx;
			position: relative;
			background: linear-gradient(180deg, #FFF4C5 0%, #FFFCEF 100%);
			border-radius: 20rpx;
			padding: 62rpx 24rpx 24rpx 24rpx;
			box-sizing: border-box;
		}

		.pages_referralsTast {
			padding-bottom: 23rpx;
			text-align: center;
			font-size: 26rpx;
			color: #999;
		}

		.pages_referralsTaxst {
			padding: 23rpx !important;
			text-align: center;
			font-size: 26rpx;
			color: #9a9999;
		}

		.pages_referralsTitleBox {
			width: 282rpx;
			height: 52rpx;
			position: absolute;
			top: -14rpx;
			left: 50%;
			transform: translateX(-50%);
			line-height: 52rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #333333;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 100%;
				height: 100%;
				z-index: -1;
				position: absolute;
			}

			span {
				display: inline-block;
				z-index: 1;

			}
		}

		.pages_informationBottom {
			padding-top: 32rpx;
			padding-bottom: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				height: 36rpx;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 36rpx;
				color: #333333;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		.pages_informationBottomImg {
			transform: rotateZ(180deg);
		}

		.pages_toolItems {
			width: 100%;
			height: 128rpx;
			border-radius: 24rpx;
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding-left: 24rpx;
			box-sizing: border-box;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			z-index: 1;

			.icon-freeTag {
				position: absolute;
				top: -24rpx;
				right: -24rpx;
				display: block;
				width: 144rpx;
				height: 96rpx;
			}
		}

		.pages_toolItemTitle {
			display: flex;
			align-items: center;
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
			position: relative;
			padding-left: 14rpx;

			&::after {
				content: "";
				width: 6rpx;
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFDA2D;

			}
		}

		.pages_toolItemText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #666666;
			padding-left: 14rpx;
			margin-top: 8rpx;
		}

		.pages_toolItems:nth-child(1) {
			margin-top: 32rpx;
		}

		.pages_toolItemBg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.codeBox {
			width: 638rpx;
			height: 682rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 24rpx;
			overflow: hidden;
			text-align: center;
		}

		.codeBoxBg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.codeBoxMainBox {
			padding: 32rpx 0;
		}

		.codeBoxMainBox_top {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
			margin-bottom: 32rpx;
		}

		.codeBoxMainBox_topText {
			margin-bottom: 40rpx;

			p {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}
		}

		/deep/.u-modal__title {
			line-height: 56rpx !important;
		}

		/deep/.u-modal__content {
			padding: 12px 25px 15px 25px !important;
		}

		.codeBoxMainBox_topImg {
			border-radius: 24rpx;
			width: 296rpx;
			height: 296rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.codeBoxMainBox_botom {
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			font-size: 16px;
			font-family: 蘋方-簡;
			color: #333;
			font-weight: bold;
			border-top: 1rpx solid #ddd;
			box-sizing: border-box;
		}

		.mycodeBox {
			width: 638rpx;
			height: 602rpx;

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 24rpx;
			overflow: hidden;
			text-align: center;
			padding: 40rpx;
			box-sizing: border-box;

			.codeBoxBg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.codeBoxMainBox_botom {
				width: 558rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				color: #000000;
				background: #ffda2d;
				opacity: 1;
				border-radius: 24rpx;
				text-align: center;

			}

			.codeBoxMainBox {
				margin-top: 200rpx;

				p {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #999999;
					margin-bottom: 32rpx;
					text-align: center;
				}

				p:nth-child(1) {
					padding: 0 24rpx;

				}

				p:nth-child(2) {
					margin-bottom: 42rpx;
				}
			}

			.codeBoxMainBox_top {
				height: 50rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 50rpx;
				color: #000000;
				margin-bottom: 32rpx;
			}

			.codeBoxMainBox_topText {
				margin-bottom: 40rpx;

				p {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #666666;
				}
			}

			.codeBoxMainBox_topImg {
				border-radius: 24rpx;
				width: 296rpx;
				height: 296rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.codeBoxMainBox_botom {
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				font-size: 16px;
				font-family: 蘋方-簡;
				color: #333;
				font-weight: bold;
				border-top: 1rpx solid #ddd;
				box-sizing: border-box;
				position: absolute;
				bottom: 40rpx;
			}
		}



		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #ffda2d;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #ffda2d;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}

		}
	}

	.wrapper {
		margin: 0 32rpx;
		border-radius: 48rpx 48rpx 16rpx 16rpx;
		background: linear-gradient(180deg, #FFFCED, #FFEECE);
	}

	.player-wrapper {

		&_bd {
			box-sizing: border-box;
			padding: 24rpx;
			display: flex;

			.player-img {
				flex-shrink: 0;
				width: 248rpx;
				height: 248rpx;
				margin-top: -48rpx;

				&>image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.player-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 200rpx;

				.player-icon_dot {
					width: 40rpx;
					height: 40rpx;
				}

				&_hd {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #FF9E00;

					.player-icon_dot {
						margin-right: 8rpx;
					}
				}

				&_bd {
					flex: 1;
					font-size: 24rpx;
					color: #333;
					margin: 8rpx 0 8rpx 48rpx;
					box-sizing: border-box;
					overflow: hidden;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				&_ft {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.player-btn {
						display: flex;
						align-items: center;
						line-height: 40rpx;
						font-size: 20rpx;
						color: #333;
						padding: 0 8rpx;
						background-color: #FFDB34;
						border-radius: 8rpx;

						&>image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;

						}
					}

					.player-icon_dot {
						margin-left: 8rpx;
					}
				}
			}
		}

		&_ft {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #999;
			font-size: 24rpx;
		}
	}

	.notice-wrapper {
		width: 640rpx;
		box-sizing: border-box;
		padding: 48rpx;
		position: relative;
		z-index: 10;
		color: #333;

		&_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
		}

		.notice-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.notice-content {
			font-size: 28rpx;
		}

		.notice-btn {
			margin-top: 32rpx;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 88rpx;
			text-align: center;
			border-radius: 24rpx;
			background-color: #FFDA2D;
		}
	}
</style>
